<template>
  <VDialog @close="handleClose" @save="save" :loading="loading" width="720">
    <template #content>
      <div>
        <el-form
          ref="formRef"
          :model="formValues"
          :rules="rules"
          label-position="top"
        >
          <el-form-item label="渠道">
            <el-input
              v-model.trim="formValues.accountChannelName"
              placeholder="请输入"
              clearable
              disabled
            />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="账户类型" prop="accountType">
                <VSelects
                  v-model="formValues.accountType"
                  placeholder="请选择"
                  :dataSourse="optionsData.account_type"
                  clearable
                  filterable
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号 " prop="account">
                <el-input
                  v-model.trim="formValues.account"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="户主" prop="attribution">
                <el-input
                  v-model.trim="formValues.attribution"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司主体" prop="principalId">
                <VSelectPlus
                  v-model="formValues.principalId"
                  placeholder="请选择"
                  url="/accountPrincipal/options"
                  clearable
                  filterable
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" v-if="formValues.accountChannelType == 1">
              <el-form-item label="币种" prop="currency">
                <VSelectPlus
                  v-model="formValues.currency"
                  placeholder="请选择"
                  url="/exchangeRate/options"
                  valueField="label"
                  clearable
                  filterable
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="formValues.accountChannelType == 1 ? 12 : 24">
              <el-form-item label="开发者账号">
                <div class="flex">
                  <VSelectPlus
                    v-model="formValues.tripartitePlatformId"
                    placeholder="请选择"
                    url="/tripartitePlatform/options"
                    clearable
                    filterable
                    class="w-[100%]"
                  />
                  <el-button
                    v-if="formValues.id"
                    type="primary"
                    class="ml-[8px]"
                    @click="
                      handleAuthorization(formValues.tripartitePlatformId)
                    "
                    >授权</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="登录链接">
                <el-input
                  v-model.trim="formValues.loginUri"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Client_ID">
                <el-input
                  v-model.trim="formValues.apiKey"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="秘钥">
            <el-input
              v-model.trim="formValues.apiSecret"
              placeholder="请输入"
              :rows="2"
              type="textarea"
              clearable
            />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input
              v-model.trim="formValues.remark"
              placeholder="请输入"
              :rows="2"
              type="textarea"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import Authorize from "../authorize/index.vue";
import { handleLink } from "@/utils/tools.js";
import { editAccount, addAccount, payoneerLink, lianlianLink } from "../api.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
  optionsData: { type: Object, default: () => {} },
});
const { optionsData } = toRefs(props);
const rules = reactive({
  accountType: [{ required: true, message: "请选择账户类型", trigger: "blur" }],
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  attribution: [{ required: true, message: "请输入户主", trigger: "blur" }],
  principalId: [{ required: true, message: "请选择公司主体", trigger: "blur" }],
  currency: [{ required: true, message: "请选择币种", trigger: "blur" }],
  tripartitePlatformId: [
    { required: true, message: "请选择三方平台", trigger: "blur" },
  ],
  loginUri: [{ required: true, message: "请输入登录链接", trigger: "blur" }],
  apiKey: [{ required: true, message: "请输入Client_ID", trigger: "blur" }],
  apiSecret: [{ required: true, message: "请输入秘钥", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注信息", trigger: "blur" }],
});
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formValues = ref({
  id: null,
  accountChannelId: null,
  accountType: null,
  account: null,
  attribution: null,
  principalId: null,
  currency: null,
  tripartitePlatformId: null,
  loginUri: null,
  apiKey: null,
  apiSecret: null,
  remark: null,
  accountChannelName: null,
  apiChannelType: null,
  accountChannelType: null,
});
const formRef = ref();

watch(
  () => props.data,
  (val) => {
    if (val) {
      for (let key in formValues.value) {
        formValues.value[key] = val[key];
      }
    }
  }
);

const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editAccount
          : addAccount)(formValues.value);
        if (code !== 200) return;
        ElMessage.success(message);
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};
const handleAuthorization = async (val) => {
  // 1:payoneer
  // 2:pingpong
  // 3:airwallex
  // 4:worldfirst
  // 5:lianlianpay
  let apiChanne = props?.data?.apiChannelType;
  let obj = {
    1: payoneerLink,
    2: "",
    3: "",
    4: "",
    5: lianlianLink,
  };
  let api = obj[apiChanne];
  if (!api) return ElMessage.warning("暂无对接");
  const { data } = await api({ accountId: formValues.value.id });
    handleLink(data.link);
};
const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    accountChannelId: null,
    accountType: null,
    account: null,
    attribution: null,
    principalId: null,
    currency: null,
    tripartitePlatformId: null,
    loginUri: null,
    apiKey: null,
    apiSecret: null,
    remark: null,
    accountChannelName: null,
    apiChannelType: null,
    accountChannelType: null,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
